<template>
  <div class="topic">
    <div class="header">
      <img :src="headerImg">
      <div class="image-content">
        <div class="content-header">
          <div class="left">
            <img :src="headImg">
            <div class="abstract">
              <span class="title">学区房</span>
              <span class="tag">学区房，从某种意义上讲，学区房是房地产市场的衍生品，教育资源垄断导致阶层固化的结果，也是现代教育改革的主要阻碍。</span>
            </div>
          </div>
          <!-- <div class="button" @click="clickNuu()">
            <van-icon name="plus" size="px" color="red"></van-icon>
            <span>关注</span>
          </div>-->
          <van-button
            type="danger"
            v-if="!attention"
            @click="clickNuu()"
            size="small"
          >关注</van-button>
          <van-button type="primary" v-else @click="clickNuu()" size="small">已关注</van-button>
        </div>
      </div>
    </div>

    <van-cell @click="goList" value="全部" is-link>
      <template slot="title">
        <span class="custom-text">团友{{number}}人</span>
        <!-- <van-tag type="danger" > -->
        <img v-for="thumb in headerArr" :key="thumb" :src="thumb" class="arrImg">
        <!-- </van-tag> -->
      </template>
    </van-cell>

    <div class="panel-content">
      <div class="panel-header">话题(共888个)</div>
      <div @click="goInfo" class="panel-list" v-for="item in  topicArr " :key="item.id">
        <div class="card_header">
          <div class>{{item.title}}</div>
          <img :src="headerImg" width="100" height="50">
        </div>
        <div class="card_header">
          <div class="min-size">{{item.name}}</div>
          <div class="min-size">
            <span>浏览{{item.browseNum}}人</span>
            <span>评论{{item.reviewNum}}人</span>
          </div>
        </div>
        <div class="card_footer">
          <div class="tip">{{item.totalAll}}人讨论</div>
          <div v-for="thumb in headerArr" :key="thumb" class="rigth">
            <img :src="thumb" class="arrImg">
          </div>
        </div>
        <div class="rightan">
          <span>查看全部话题</span>
          <van-icon name="arrow-down" size="10px" color="#e5e5e5"></van-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Icon, Cell, Toast, Panel, Button } from 'vant'
export default {
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Panel.name]: Panel,
    [Button.name]: Button
  },
  data() {
    return {
      headerImg:
        'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg',
      headImg:
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190329/9a45702df92e4abcbafe7253b7e949f0.jpeg',
      headerArr: [
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190329/9a45702df92e4abcbafe7253b7e949f0.jpeg',
        'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg'
      ],
      topicArr: [
        {
          id: '0',
          title: '大多数人们喜欢的户型有哪些?',
          name: '@测试',
          browseNum: 50,
          reviewNum: 20,
          totalAll: 666
        },
        {
          id: '1',
          title: '学区房到底有什么好处?',
          name: '@张某某',
          browseNum: 150,
          reviewNum: 120,
          totalAll: 999
        }
      ],
      attention: false
    }
  },
  computed: {
    number: function() {
      return this.headerArr.length
    }
  },
  methods: {
    clickNuu() {
      Toast('loading')
      setTimeout(() => {
        this.attention = !this.attention
      }, 500)
    },
    goList() {
      this.$router.push('/user')
    },
    goInfo() {
      this.$router.push('/topicInfo')
    }
  }
}
</script>
<style lang="less">
.topic {
  font-size: 16px;
  .header {
    img {
      position: absolute;
      width: 100%;
      height: 170px;
    }
    .image-content {
      position: relative;
      bottom: 0;
      height: 170px;
      .content-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px 20px;
        box-sizing: border-box;
        width: 100%;
        .left {
          width: 80%;
          padding: 10px 0;
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
          .abstract {
            display: flex;
            flex-direction: column;
            margin-left: 70px;
            margin-top: 5px;
            color: #e5e5e5;
            .title {
              font-size: 14px;
            }
            .tag {
              font-size: 12px;
            }
          }
        }
        .button {
          padding: 3px 5px;
          box-sizing: border-box;
          width: 60px;
          height: 30px;
          border-radius: 5px;
          margin-top: 20px;
          border: 1px solid #e5e5e5;
          cursor: pointer;
          span {
            display: inline-block;
            font-size: 14px;
            color: #e5e5e5;
          }
        }
      }
    }
  }
  .van-cell {
    position: absolute;
    top: 220px;
  }
  .panel-content {
    position: absolute;
    top: 280px;
    background: #fff;
    width: 100%;
    height: auto;
    padding: 0 20px;
    box-sizing: border-box;
    .panel-header {
      padding: 10px 0;
      font-size: 16px;
      box-sizing: border-box;
    }
    .panel-list {
      margin-bottom: 20px;
      border: 1px solid #e5e5e5;
      padding: 10px 10px;
      box-sizing: border-box;
      .card_header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      .card_footer {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 14px;
        padding: 10px 0;
        box-sizing: border-box;
        border-top: 1px solid #e5e5e5;
        margin-top: 5px;
      }
    }
  }
  .footer {
    width: 100%;
    position: fixed;
    bottom: 50px;
    height: 50px;
    border-top: 1px solid #e5e5e5;
    padding: 10px 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    input {
      width: 70%;
      height: 30px;
      padding-left: 5px;
      border-radius: 5px;
      border: 1px solid #e5e5e5;
    }
    .van-button {
      height: auto;
      line-height: normal;
    }
  }
}
.min-size {
  font-size: 12px;
  color: #e3e3e3;
  margin-top: 10px;
}
.arrImg {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.tip {
  margin-right: 15px;
}
@-webkit-keyframes rightan {
  from {
    bottom: 0%;
    opacity: 0;
  }
  to {
    bottom: 10%;
    opacity: 1;
  }
}
.rightan {
  -webkit-animation: rightan 1s infinite;
  -webkit-animation-fill-mode: both;
  text-align: center;
  span {
    font-size: 12px;
    color: #e3e3e3;
  }
}
</style>


